<%-- 
    Document   : buscarAutor
    Created on : 29-dic-2013, 15:36:17
    Author     : Johann Pando
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="css/miFormulario.css"  type="text/css" rel="stylesheet"/>
        <title>Buscar Libros de Autor</title>
        <script type="text/javascript" language="javascript">
            var xhr;

            /**
             * Se invoca cuando se carga la página.
             * Luego de comprobar que es posible trabajar con AJAX invoca a la
             * función enviarPeticion
             * @returns {undefined}
             */
            function cargarAutores() {
                // solo para Explorer 6 y anteriores
                if (window.ActiveXObject)
                    xhr = new ActiveXObject("Microsoft.XMLHttp");
                // resto de navegadores
                else if ((window.XMLHttpRequest) ||
                        (typeof XMLHttpRequest) != undefined)
                    xhr = new XMLHttpRequest();
                // si el navegador no soporta AJAX
                else {
                    alert("Su navegador no soporta AJAX");
                    return;
                }

                enviarPeticionCargaAutores();
            }

            /**
             * Función que realiza la petición al servlet 'servletAutorURL' de
             * forma asíncrona para cargar los autores existentes en BD.
             * @returns {undefined}
             */
            function enviarPeticionCargaAutores() {
                // Seleccionar la lista de todos los titulos
                //var lista = document.getElementById("titulo");

                // Obtener el indice del libro seleccionado
                //var indice = lista.options[titulo.selectedIndex].value;

                // preparar la peticion
                // true --> peticion asincrona, false --> peticion sincrona
                xhr.open("GET", "servletAutorURL", true);
                // informar de la funcion que procesara la respuesta
                xhr.onreadystatechange = procesarRespuestaCargaAutores; // sin parentesis

                // enviar la peticion
                xhr.send(null);
            }

            /**
             * Función que recupera el response de 'XMLHttpRequest' con los datos
             * de los autores existentes en BD. Cada autor se va añadiendo al select
             * de autores.
             * @returns {undefined}
             */
            function procesarRespuestaCargaAutores() {
                // si se ha recibido por completo la respuesta
                if (xhr.readyState == 4) {
                    // Se crea un array con los autores.
                    var autores = xhr.responseText.split(",");
                    // Creamos una variable para obtener el número de posiciones
                    // del array creado anteriormente.
                    var numAutores = xhr.responseText.split(",").length;
                    // Para trabajar más fácilmente con el combo, lo asignamos a una variable.
                    var selectAutor = document.getElementById("autor");
                    //Recorremos el array de nombres de autor, por cada uno se añade al combo de autor.
                    for (var i = 0; i < numAutores; i++) {
                        //Creamos un objeto auxiliar para indicar el valor y el texto
                        // que se añadirán al combo de autores.
                        var newOption = document.createElement("option");
                        newOption.value = autores[i];
                        newOption.text = autores[i];
                        try {
                            //Para IE anterior al 8.
                            selectAutor.add(newOption, selectAutor.options[null]);
                        }
                        catch (e) {
                            selectAutor.add(newOption, null);
                        }
                    }
                }
            }

            /**
             * Función que se invoca cuando se selecciona un nuevo valor
             * del combo de autores. Luego con el valor del combo se realiza
             * la llamada al servlet 'servletAutorURL' y como parámetro el valor obtenido
             * con el fin de recuperar los libros del autor seleccionado.
             * @returns {undefined}
             */
            function cargarLibros() {
                // Seleccionar la lista de todos los titulos
                var lista = document.getElementById("autor");
                //Si se ha seleccionado el título del combo, no continuamos...                 
                if (autor.selectedIndex != 0) {
                    // Obtener el indice del libro seleccionado
                    var indice = lista.options[autor.selectedIndex].value;

                    // preparar la peticion
                    // true --> peticion asincrona, false --> peticion sincrona
                    xhr.open("GET", "servletAutorURL?autor=" + indice, true);

                    // informar de la funcion que procesara la respuesta
                    xhr.onreadystatechange = procesarRespuestaCargaLibros; // sin parentesis

                    // enviar la peticion
                    xhr.send(null);
                } else {//Limpiamos el div.
                    document.getElementById("sinopsis").innerHTML = "";
                }
            }

            /**
             * Función que, a travñes del response, pintará en una tabla
             * los libros del autor seleccionado en el combo de autor.
             * @returns {undefined}
             */
            function procesarRespuestaCargaLibros() {
                // si se ha recibido por completo la respuesta
                if (xhr.readyState == 4) {
                    //Si se ha seleccionado un autor ...
                    if (xhr.responseText != "null" && xhr.responseText != "") {
                        var textoHTML = "<div class='datagrid'>";
                        // crear una tabla HTML
                        textoHTML += "<table>";
                        textoHTML += "<thead>";
                        // crear una fila de cabecera con el nombre de los elementos                        
                        textoHTML += "<tr>";
                        textoHTML += "<th align='center'>T&iacute;tulo del libro</th>";
                        textoHTML += "</tr>";
                        textoHTML += "</thead>";
                        textoHTML += "<tbody>";
                        //Recuperamos del response los libros separados por comas en un array.
                        var libros = xhr.responseText.split(",");
                        //Recuperamos la longitud del array anterior.
                        var numLibros = xhr.responseText.split(",").length;
                        //Por cada libro se pinta una nueva fila.
                        for (var i = 0; i < numLibros; i++) {
                            // crear una fila de datos
                            //El if sirve para el efecto de pintar con colores
                            //distintos cada línea.
                            if (i % 2 == 0) {
                                textoHTML += "<tr class='alt'>";
                            } else {
                                textoHTML += "<tr>";
                            }
                            textoHTML += "<td>" +
                                    libros[i] +
                                    "</td>";
                            textoHTML += "</tr>";
                        }
                        textoHTML += "</tbody>";
                        //Cerramos la tabla
                        textoHTML += "</table>";
                        textoHTML += "</div>";
                        document.getElementById("sinopsis").innerHTML = textoHTML;
                        //Si no se ha seleccionado un autor se limpia el div.    
                    } else {
                        document.getElementById("sinopsis").innerHTML = "";
                    }
                }
            }

        </script>
        <!-- Aquí va el código css-->
        <style type="text/css">
            .datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
            .datagrid {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #006699; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }.datagrid table td, 
            .datagrid table th { padding: 3px 10px; }.datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #00557F) );background:-moz-linear-gradient( center top, #006699 5%, #00557F 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');background-color:#006699; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #0070A8; } .datagrid table thead th:first-child { border: none; }.datagrid table tbody td { color: #00496B; border-left: 1px solid #E1EEF4;font-size: 12px;font-weight: normal; }.datagrid table tbody .alt td { background: #E1EEF4; color: #00496B; }.datagrid table tbody td:first-child { border-left: none; }.datagrid table tbody tr:last-child td { border-bottom: none; }

            .yourdiv{display: inline-block;width: 50%;}
        </style>

    </head>
    <!-- Al cargar la página se invoca a la función cargar libros (Consulta a BBDD)-->
    <body onload="cargarAutores();" style="background-color:#E6E6E6;text-align:center;"> 
        <!--BEGIN #signup-form -->
        <div id="signup-form">
            <!--BEGIN #subscribe-inner -->
            <div id="signup-inner">
                <div class="clearfix" id="header">
                    <h1>B&uacute;squeda de Libros por autor</h1>
                </div>
                <br>
                <p style="font-family:arial;color:red;font-size:20px;">Elige un autor:
                    <!-- Declaramos el identificador y la función que se activará cuando se cambie de valor.-->
                    <select id="autor" onchange="cargarLibros();">
                        <option>-- Seleccione Autor --</option>          
                    </select>
                </p>
                <div id="sinopsis" class="yourdiv">           
                </div>
                <!-- Añadimos un div con un botón para volver atrás-->
                <div align="center" style="margin-top: 20px;"><a href="controladorLibreria?op=99">Volver</a></div>
                <!--END #signup-inner -->
            </div>
            <!--END #signup-form -->   
        </div>
    </body>
</html>
